<template>
	<view class="container">
		<!-- 标题 -->
		<headTitle title="订单详情"></headTitle>
		<view class="status img-size-repeat">
			<view class="box">
				<view class="left flex-center-center font32 colorfff">
					<text>{{txts[orderInfo.orderStatus]}}</text><text v-if="orderInfo.orderStatus === 0">（{{ time }}）</text>
				</view>
				<view class="right">
					<image :src="imgs[orderInfo.orderStatus]" mode="" v-if="true"></image>
				</view>
			</view>
		</view>
		
		<view class="add-wu">
			<view class="bgfff flex-center" @tap="toTrack(orderInfo.deliverySn)">
				<view class="icon flex-center-center">
					<image src="/static/image/deswl.png" mode=""></image>
				</view>
				<view class="wu" v-if="orderInfo.lastDeliveryInfo">
					<view class="first font30 color333">{{ orderInfo.lastDeliveryInfo }}</view>
					<view class="second font26 color999">{{ orderInfo.lastDeliveryTime }}</view>
				</view>
				<view class="wu-r flex-center-center">
					<text class="yticon icon-you"></text>
				</view>
			</view>
			<view class="bgfff flex-center">
				<view class="icon flex-center-center">
					<image src="/static/image/desadd.png" mode=""></image>
				</view>
				<view class="add">
					<view class="first font30 color333">
						<text class="txt">{{ orderInfo.userName }}</text><text>{{ orderInfo.phone | cipherTepl }}</text>
					</view>
					<view class="second font26 color999">{{ orderInfo.address }}</view>
				</view>
			</view>
		</view>
		
		<view class="order-item">
			<!-- 订单列表 -->
			<view class="shop-info bgfff">
				<view class="i-top flex-center">
					<text class="font32 color333">商品信息</text>
				</view>
				
				<view class="goods-box-single" v-for="(goodsItem, goodsIndex) in orderInfo.orderListItemInfos" :key="goodsIndex">
					<img class="goods-img" :src="goodsItem.image" mode="aspectFill"></img>
					<view class="right flex-column-between">
						<view class="info flex-column">
							<view class="title show-two-text font28 color333">{{ goodsItem.title }}</view>
							<view class="attr-box font24 color999">{{ goodsItem.skuAttr }}</view>
						</view>
						<view class="prcie-b flex-center-between">
							<view class="price flex-center">
								<text class="font24 colorred">￥</text>
								<text class="font30 colorred">{{ goodsItem.price }}</text>
							</view>
							<text class="font26 color666">x{{ goodsItem.productQuantity }}</text>
							<view class="font30 color666" :class="{'yellow': goodsItem.aftersalesStatus === 4, 'red': goodsItem.aftersalesStatus === 0}" @tap="applyRefund(goodsItem.orderId)"
								v-if="orderInfo.orderStatus === 3 && goodsItem.aftersalesStatus !== -1">{{outText[goodsItem.aftersalesStatus]}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="order-info bgfff">
				<view class="title font32 color333">订单信息</view>
				<view class="msg flex-center-between font30 color999" v-if="orderInfo.buyerMessage">
					<view class="text-left">买家留言：</view>
					<view class="text-right show-one-text">{{ orderInfo.buyerMessage }}</view>
				</view>
				<view class="op">
					<view class="flex-center-between font30">
						<view class="color999">订单编号</view>
						<view class="color333">{{ orderInfo.orderNo }}</view>
					</view>
					<view class="flex-center-between font30">
						<view class="color999">下单时间</view>
						<view class="color333">{{ orderInfo.submitTime }}</view>
					</view>
					<view class="flex-center-between font30" v-if="orderInfo.orderStatus === 1 || orderInfo.orderStatus === 2 || orderInfo.orderStatus === 3">
						<view class="color999">支付时间</view>
						<view class="color333">{{ orderInfo.payTime }}</view>
					</view>
					<view class="flex-center-between font30" v-if="orderInfo.orderStatus === 1 || orderInfo.orderStatus === 2 || orderInfo.orderStatus === 3">
						<view class="color999">支付方式</view>
						<view class="color333">{{ orderInfo.payType === 1 ? '支付宝' : '微信' }}</view>
					</view>
				</view>
			</view>
			<view class="price-box bgfff">
				<view class="op">
					<view class="flex-center-between font30">
						<view class="color999">商品合计</view>
						<view class="color333">¥{{ orderInfo.totalAmount || 0 }}</view>
					</view>
					<view class="flex-center-between font30">
						<view class="color999">运费</view>
						<view class="color333">¥{{ orderInfo.freightAmount || 0 }}</view>
					</view>
					<view class="flex-center-between font30">
						<view class="color999">优惠券</view>
						<view class="color333">-¥{{ orderInfo.couponAmount || 0 }}</view>
					</view>
				</view>
				<view class="pay flex-center-between">
					<view class="font30 color333 fontb">{{orderInfo.orderStatus === 0 ? '需支付' : '实付'}}</view>
					<view>
						<text class="font26 colorred">¥</text><text class="font38 colorred fontb">{{ orderInfo.payAmount || 0 }}</text>
					</view>
				</view>
			</view>
			<view class="action-box flex-center bgfff">
				<button v-if="orderInfo.orderStatus === 3 && orderInfo.isComment === 1" class='action-btn' @tap="toEvaluate(orderInfo.orderId)">评价</button>
				<button v-if="orderInfo.orderStatus === 3 || orderInfo.orderStatus === 4" class="action-btn" @tap="deleteOrder">删除订单</button>
				<button v-if="orderInfo.orderStatus === 2" class="action-btn" @tap="toTrack(orderInfo.deliverySn)">查看物流</button>
				<button v-if="orderInfo.orderStatus === 0" class="action-btn" @tap="cancelOrder">取消订单</button>
				<button v-if="orderInfo.orderStatus === 0" class="action-btn recom" @tap="payOrder">立即支付</button>
				<button v-if="orderInfo.orderStatus === 3" class="action-btn recom" @tap="againPay">再次购买</button>
				<button v-if="orderInfo.orderStatus === 1" class="action-btn recom" @tap="remindSend">提醒发货</button>
				<button v-if="orderInfo.orderStatus === 2" class="action-btn recom" @tap="confimDelivery">确认收货</button>
			</view>
		</view>
	</view>
</template>

<script>
import Api from '@/common/api'
import headTitle from '@/components/head-title.vue'
export default {
	data() {
		return {
			timer: null, // 计时器
			time: 0, // 倒计时时间
			tabCurrentIndex: 0,
			orderInfo: {},
			money: 0, // 立即付款选择支付方式使用
			txts: ['等待付款', '待发货', '待收货', '已完成', '订单已关闭'],
			outText: ['申请售后', '退换货中', '换货成功', '退款成功', '申请被拒'],
			imgs: ['/static/image/desfk.png', '/static/image/desfh.png', '/static/image/desfh.png', '/static/image/deswc.png', '/static/image/desgb.png'],
			index: -1, 
		};
	},

	async onLoad(options) {
		if(options.id) {
			this.orderInfo = await Api.apiCall('get', Api.order.getOrderDes, {id: options.id})
			if(this.orderInfo.orderStatus === 0) {
				this.orderTimer(this.orderInfo.orderCloseTime)
			}
		}
		if(options.index) {
			this.index = options.index
		}
	},
	onBackPress() {
		// 页面退出清掉计时器
		clearInterval(this.timer)
	},
	methods: {
		// 提醒发货
		remindSend() {
			this.$api.msg('已经提醒卖家发货，请等待！')
		},
		// 再次购买
		againPay() {
			uni.showModal({
				content: '订单中的商品都卖光啦，再看看其他商品吧～',
				showCancel: false,
			})
		},
		//删除订单
		deleteOrder() {
			uni.showModal({
				content: '确定要删除吗？',
				success: (res) => {
					if (res.confirm) {
						this.del()
					}
				}
			})
		},
		// 删除
		async del() {
			let data = Api.apiCall('post', Api.order.delOrder, {orderId: this.orderInfo.orderId}, true)
			if(data) {
				this.$api.msg('删除成功')
				this.$api.prePage().orderList.splice(this.index, 1)
				setTimeout(function() {
					uni.navigateBack()
				}, 500)
			}
		},
		//立即支付
		async payOrder() {
			this.money = this.orderInfo.totalAmount
			this.$common.navigateTo('/pages/money/money?type=order&orderId=' + this.orderInfo.orderId)
		},
		//取消订单
		cancelOrder() {
			uni.showModal({
				content: '确定要取消订单？',
				success: (res) => {
					if (res.confirm) {
						this.cancel()
					}
				}
			})
		},
		// 取消
		async cancel() {
			let data = await Api.apiCall('post', Api.order.cancelOrder, {orderId: this.orderInfo.orderId}, true)
			if(data) {
				this.$api.msg('取消成功')
				this.orderInfo.orderStatus = 4
				this.$api.prePage().orderList[this.index].orderStatus = 4
			}
		},
		//订单确认收货
		async confimDelivery() {
			let data = await Api.apiCall('post', Api.order.confimOrder, {orderId: this.orderInfo.orderId}, true)
			if (data) {
				this.$api.msg('确认收货成功')
				this.orderInfo.orderStatus = 3
				this.$api.prePage().orderList[this.index].orderStatus = 3
			}
		},
		//订单申请退款
		async applyRefund(orderId) {
			if(item.aftersalesStatus !== 0) return
			this.$common.navigateTo('/pages/order/marketApply?id=' + orderId)
		},
		// 去评价
		toEvaluate(orderId) {
			this.$common.navigateTo('/pages/comment/publishComment?orderId=' + orderId)
		},
		// 查看物流
		toTrack(id) {
			this.$common.navigateTo('/pages/order/track?id=' + id)
		},
		// 计时器
		orderTimer(time) {
			time -= 5000
			if(time <= 0) {
				// 执行上个页面的数据关闭
				
				this.orderInfo.orderStatus = 4
				return 
			}
			this.formatDate(time)
			this.timer = setInterval(() => {
				time -= 1000
				if(time <= 0) {
				  clearInterval(this.timer)
				  // 执行上个页面的数据关闭
				  
				  this.orderInfo.orderStatus = 4
				}
				this.formatDate(time)
			}, 1000)
		},
		// 时间格式处理
		formatDate(time) {
			var minutes = parseInt((time % (1000 * 60 * 60)) / (1000 * 60));
			var seconds = (time % (1000 * 60)) / 1000;
			this.time = minutes + "分钟" + seconds + "秒"
		},
	},
	components: {
		headTitle
	},
}
</script>

<style lang="scss">
page {
	padding-bottom: 98rpx;
	background: #F7F7F7;
}

.status {
	width: 100%;
	height: 263rpx;
	background-image: url('/static/image/debanner.png');
	.box {
		width: 100%;
		height: 188rpx;
		padding: 0 73rpx 0 40rpx;
		display: flex;
		justify-content: space-between;
		.left {
			
		}
		.right {
			margin-top: 73rpx;
			image {
				width: 146rpx;
				height: 81rpx;
			}
		}
	}
}
.add-wu {
	padding: 0 24rpx;
	margin-top: -70rpx;
	&>view  {
		padding: 30rpx 0;
		width: 100%;
		min-height: 142rpx;
		margin-bottom: 20rpx;
		border-radius: 8rpx;
		.icon {
			width: 88rpx;
			image {
				width: 48rpx;
				height: 48rpx;
			}
		}
		.wu {
			width: calc(100% - 148rpx);
		}
		.wu-r {
			width: 60rpx;
			.icon-you {
				font-size: $font-base;
				color: #333;
			}
		}
		.add {
			width: calc(100% - 108rpx);
		}
		.first {
			line-height: 42rpx;
			letter-spacing: 1rpx;
			margin-bottom: 16rpx;
			.txt {
				margin-right: 40rpx;
			}
		}
		.second {
			line-height: 36rpx;
			letter-spacing: 2rpx;
		}
	}
}

.order-item {
	display: flex;
	flex-direction: column;
	.shop-info {
		margin-bottom: 20rpx;
		.i-top {
			height: 108rpx;
			padding: 0 25rpx;
		}
		.goods-box-single {
			display: flex;
			margin: 0 20rpx 20rpx;
			background-color: #F9F9F9;
			padding: 30rpx 20rpx;
			.goods-img {
				width: 178rpx;
				height: 178rpx;
				border-radius: 3rpx;
				margin-right: 21rpx;
			}
			.right {
				width: calc(100% - 200rpx);
				height: 178rpx;
				.info {
					transform: translateY(-2px);
					.title {
						line-height: 42rpx;
					}
					.attr-box {
						margin-top: 12rpx;
					}
				}
				.prcie-b {
					transform: translateY(5px);
					.price {
						align-items: baseline;
					}
					.yellow {
						color: #F1A924;
					}
					.red {
						width: 154rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						border-radius: 30rpx;
						border: 1rpx solid #C84739;
						color: #C84739;
					}
				}
			}
		}
	}

	.order-info {
		margin-bottom: 20rpx;
		.title {
			padding-left: 25rpx;
			height: 98rpx;
			line-height: 98rpx;
			border-bottom: 1rpx solid #EEE;
		}
		.msg {
			width: 100%;
			padding: 30rpx;
			border-bottom: 1rpx solid #F6F6F6;
			.text-left {
				width: 155rpx;
			}
			.text-right {
				width: 496rpx;
			}
		}
		.op {
			padding: 30rpx 30rpx 0;
			&>view {
				margin-bottom: 30rpx;
			}
		}
	}
	
	
	.price-box {
		margin-bottom: 20rpx;
		.op {
			padding: 30rpx 30rpx 0;
			&>view {
				margin-bottom: 30rpx;
			}
		}
		.pay {
			padding: 0 30rpx;
			height: 97rpx;
			line-height: 97rpx;
			border-top: 1rpx solid #EEE;
		}
	}
	
	.action-box {
		border-top: 1rpx solid #EEE;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 1;
		justify-content: flex-end;
		width: 100%;
		height: 98rpx;
		padding-right: 30rpx;
	}
	.action-btn {
		margin: 0;
		width: 160rpx;
		height: 64rpx;
		margin-left: 20rpx;
		padding: 0;
		text-align: center;
		line-height: 64rpx;
		font-size: 28rpx;
		color: #666;
		background-color: #fff;
		border-radius: 32rpx;
		border: 1rpx solid #AAA;
		&:after {
			border: 0;
		}
		&.recom {
			border: 0;
			background: #C84739;
			color: #fff;
			&:after {
				border-color: #f7bcc8;
			}
		}
	}
}
</style>
